 /**
 * Created by sunguodong on 2021/12/22.
 * Email: sungd@tongtech.com
 * Description: ArGIS 地图中的应用方法
 */

import './index.less';
import React, {useEffect} from "react";
// import MapView from "@arcgis/core/views/MapView";
// import Map from "@arcgis/core/Map";
// import esriConfig from "@arcgis/core/config";
import {message} from "antd";
import * as esriLoader from 'esri-loader';
const options = {   
    url: 'https://js.arcgis.com/3.39/',
}
esriLoader.loadScript(options);
// esriLoader.loadCss(`https://js.arcgis.com/3.39/esri/css/esri.css`);

export const MapLifecycle: React.FC = () => {
    
    function componentDid() {
        esriLoader.loadModules([
            'esri/map',
            "esri/geometry/webMercatorUtils", 
        ]).then(([Map, webMercatorUtils]) => {
            const map = new Map('mapCon', {
                basemap: 'topo-vector',
                center: [-122.45, 37.75],
                zoom: 13
            });
            // 获取地图中心点坐标
            function getCenterPoint()
            {
                return map.extent.getCenter();
            }
            // 监听缩放
            map.on("extent-change", function(){
                var scale = map.getLevel();
			    console.log(scale);

                var point = getCenterPoint();
                
                var newPoint = webMercatorUtils.webMercatorToGeographic(point);
                
                console.log("current map center point is x: " + point.getLatitude() + ", y: " + point.getLongitude());
                console.log("current map center is x: " + newPoint.x + ", y: " + newPoint.y);
            });
            // 点击事件
            map.on("click", function (event: any) {
				console.log(event);
				// 中心点
				console.log("x:" + event.mapPoint.x);
				console.log("y:" + event.mapPoint.y);
				// 点击位置的坐标
				console.log("longitude:" + event.screenPoint.x);
				console.log("latitude:" + event.screenPoint.y);
			});

            // 禁止拖拽
            map.disablePan();
            
            // 禁止双击缩放
            // map.disableDoubleClickZoom();
    
            
        }).catch(err => {
            console.error(err)
        })
    }
    // 参数：
    // extent	                范围：如果设置了该选项,一旦这个选项的投影被设置,那么所有的图层都在定义的投影中绘制
    // logo	                是否显示esri的logo   (boolean类型)
    // wrapAround180	        是否连续移动地图(即通过日期变更线,类似对地图进行横向旋转360度).
    // lods	                设置地图的初始化比列级别
    // maxScale	            设置地图的最大可视化比例尺
    // sliderStyle	            设置slider的样式(值为large或者small

    // 属性：
    // autoResize	            true：如果调整包含地图的浏览器窗口或ContentPane小部件的大小，则地图会自动调整大小 （boolean类型）
    // contenPane	            调整了填充的底图控件的小部件大小，底图是否自动调整大小
    // attribution	            地图属性
    // fadeOnZoom	            地图缩放时，是否启用淡入淡出的效果
    // extent	                地图的外包矩形的范围
    // force3DTransforms	    是否启用CSS3转换
    // infoWindow	            在地图上显示消息框
    // isClickRecenter	        按住Shift键，在地图上单击鼠标左键，是否显示将该点设为地图中心
    // isDoubleClickZoom	    双击鼠标左键，是否进行地图放大操作
    // isPan	                设置地图是否可以用鼠标移动
    // spatialReference	    获取地图的空间参考信息
    // isKeyboardNavigation	是否用键盘上的 + 和- 导航地图
    // isRubberBandZoom	    是否启用橡皮筋缩放模式
    // isScrolWheelZoom	    是否允许滚轮进行缩放操作
    // isShiftDoubleClickZoom	按住Shift键，在地图上双击鼠标左键，是否将该点设为地图中心的同时进行缩放操作
    // geographicExtent	    地图的地理坐标范围（只支持web墨卡托）
    // layerIds	            地图已加载的图层ID列表
    // loaded	                地图控件是否已加载完成
    // graphics	            获取地图的GraphicsLayer
    // position	            获取地图左上角的坐标
    // root	                容纳图层、消息框等容器的DOM节点
    // showAttribution	        是否允许显示地图属性
    // snappingManager	        捕捉管理器
    // isZoomSlider	        设置或者获取地图的放大滑块状态（Boolean）
    // layeIds	                获取地图的图层id数组
    // navigation	            设置或获取地图的导航模式
    // timeExtent	            地图的时间范围

    // 方法：
    // toScreen/toMap          将单个地图点 / 屏幕点转换成屏幕坐标 / 地图坐标
    // setScale                设置地图指定的比例尺
    // setZoom                 放缩到指定的层级
    // setLevel                放缩到指定的层级
    // setExtend               设置地图显示的范围，常用于进行地图的平移操作
    // diablepan               禁止使用鼠标拖放地图
    // removeAllLayers         移除所有图层
    // addLayer                添加图层
    // getBasemap              获取底图
    // getLayer                根据id获取图层
    // getLevel                获取当前地图的放大层级
    // cneterAndZoom           设置地图的中心及放大层级
    // setMapCursor            设置地图的中心及放大层级
    // getLayersVisibleAtScaleRange    获取某一比列尺下的可见图层
    // getScale                获取当前的比列尺
    // hidePanArrows           隐藏移动时候的鼠标箭头
    // hideZoomSlider          隐藏放大滑块
    // panRight                向右平移
    // panUp                   向北平移
    // removeLayer             移除指定图层
    // reorderLayer            改变图层的顺序
    // reposition              复位地图，该方法在地图的Div被复位的时候要用到
    // setTimeSlider           设置和地图关联的时间滑块
    // setZoom                 设置放大级别
    // showPanArrows           显示平移箭头
    // showZoomSlider          显示放大滑块
    // enablePan               允许鼠标拖动地图
    // addLayer                添加图层

    // 事件：
    // onExtentChange	        地图改变范围事件
    // onBasemapChange	        地图的底图发生变化
    // onLoad	                当第一个图层或者底图被添加到Map中的时候发生
    // onClick	                在地图单击的时候发生
    // onLayerAdd	            当图层添加的时候发生
    // onLayersAddResult	    当所有图层都添加结束后发生，使用map.addLayers方法之后
    // onLayersRemove	        当所有的图层读移除后发生
    // onMouseDown	            按下鼠标按钮并且鼠标光标位于HTML页面的地图区域时触发
    // onMouseMove	            当鼠标在地图移动时候发生（常用来获取X、Y的坐标值）
    // onMouseout	            当鼠标移出地图时候发生
    useEffect(() => {
        return componentDid();
    }, []);

    function componentWillUn() {

    }

    useEffect(() => () => {
        return componentWillUn();
    }, []);

    return (
        <div>
            <div id="mapCon"></div>
        </div>
    )
  
}
